<template>
  <div>
    <Header :title_='title_'></Header>
    <van-form v-model="userinfo">
      <van-field
        v-model="userinfo.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="userinfo.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <form acion="/api/mult" method="POST" entype="multipart/form-data">
        <!-- <input name="file" type="file" /> -->
        <!-- <i>上传png|jpg|png图片</i> -->
      </form>

      <div style="margin: 16px;">
        <van-button class="btn" round block type="info" @click="zhuce()">注册</van-button>
      </div>
    </van-form>
    <div class="bindTips">
      <p>我已经阅读并同意<span>虎扑识货用户协议（含隐私政策）</span>，系统将同步为您创建虎扑识货帐号</p>
    </div>
    <div class="afterSuccess">
      <p>温馨提示：</p>
      <p>帐号注册成功后，您可以方便使用</p>
      <p>虎扑网、手机虎扑网、虎扑App、识货等服务。</p>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Form, Toast } from "vant";
import Header from "@/components/Header/Header";


Vue.use(Form);
Vue.use(Toast);
export default {
  data() {
    return {
      title_:'注册',
      userinfo: {
        username: "",
        password: ""
      }
    };
  },
  components: {
    Header,
  },
  methods: {
    zhuce() {
      if (this.userinfo.username == "" || this.userinfo.password == "") {
        alert("用户名或密码不能为空");
      } else {
        this.$axios.post("/api/register", this.userinfo).then(
          res => {
            Toast.fail("注册成功");
            this.$router.push({ path: "/login" });
            console.log(res);
          },
          error => {
            Toast.fail("用户已存在");
          }
        );
      }
    }
  }
};
</script>
<style lang="scss">
.btn{
  background: #d8544c;
  border: #d8544c;
  font-size: 18px;
  width: 95px;
  height: 34px;
  margin-left: 120px;
}
.bindTips{
  font-size: 14px;
    line-height: 1.5;
    margin: -10px 0 20px 5px;
    color: #999;
    padding: 0;
    span{
      color: rgb(19, 92, 248);
    }
}
.afterSuccess{
  // border: 1px solid red;
  margin-left: 15px;
  p:nth-of-type(1){
    color: red;
    margin-bottom: 5px;
  }
  p:nth-of-type(2){
    color: #666;
    font-size: 13px;
  }
  p:nth-of-type(3){
    color: #666;
    font-size: 13px;
  }
}
</style>